import React, { Component } from 'react';
import { StyleSheet, PixelRatio, View, Text, Image, Animated, TouchableOpacity, findNodeHandle, UIManager } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { style } from '../../../../theme/style';
import { OrderCommon } from '../../_common/common';
import { CURRENCY } from '../../../../utils/helper';
import navigationSeevice from '../../../../components/navigation/navigationSeevice'

const scale = GLOBAL.SCALE;
export class GoodsItemCpt extends Component {
    constructor(props) {
        super(props);
        let { visible } = props.data || {};
        this.state = {
            visible,
            heightObj: new Animated.Value(55 * 1 * scale),
            imgObj: new Animated.Value(0),
            onoff: false
        }
        this.onOff = true;
    }

    componentDidMount = () => { }

    // 动画
    _startAnimated = (num) => {
        let { onoff, heightObj, imgObj } = this.state;
        if (onoff) {
            Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: 55 * 1 * scale, duration: 300, }).start(() => { this.setState({ onoff: false }) });
        } else {
            Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: 55 * num * scale, duration: 300 }).start(() => { this.setState({ onoff: true }) })
        }
    }

    //跳详情
    _goDetail = (itemData) => {
        let { navigation } = this.props;
        navigation.push('OrderDetailsPage', { orderId: itemData.orderId })
    }



    render () {
        let titleImgObj = require('../../../../imgs/order/down.png');
        let { heightObj, imgObj } = this.state;
        const spin = imgObj.interpolate({
            inputRange: [0, 1],//输入值
            outputRange: ['0deg', '180deg'] //输出值
        })
        let { itemData } = this.props || {};
        let { orderId, companyName, createTime, statusName, totalOrderAmt, totalOrderQuantity, unitSymbol, currency, orderItemList, isQhXhXsBiz } = itemData || {};
        let unit = CURRENCY.getUnit(currency).text;
        return (
            <View style={[{ paddingBottom: 5 * scale, paddingLeft: 12 * scale, paddingRight: 12 * scale }]}>
                <View style={styles.itemHead}>
                    <View style={{ flexDirection: 'row', flex: 1 }}>
                        <Text numberOfLines={1} style={{ color: '#272727' }}>{companyName}</Text>
                    </View>
                    <Text style={{ color: '#272727', fontSize: 13 * scale, opacity: .6 }}>{createTime}</Text>
                </View>
                <TouchableOpacity onPress={() => { this._goDetail(itemData) }} activeOpacity={.6} style={styles.listItem}>
                    <View style={styles.itemHeader}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ color: '#272727', fontSize: 13 * scale }}>{orderId}</Text>
                            {isQhXhXsBiz === 'Y' ? <Image source={OrderCommon.iconData.quanHuaImg} style={styles.infoItemImg} /> : null}
                            <Image source={OrderCommon.iconData.innerImg} style={styles.infoItemImg} />
                            <Image source={OrderCommon.iconData.executeImg} style={styles.infoItemImg} />
                            <Image source={OrderCommon.iconData.openImg} style={styles.infoItemImg} />
                        </View>
                        <Text style={[{ color: '#FA4516', fontSize: 13 * scale }]}>{statusName}</Text>
                    </View>
                    <Animated.View style={[styles.itemBody, { height: heightObj }]}>
                        {
                            orderItemList && orderItemList.length && orderItemList.map((item, index) => {
                                return (
                                    <View style={styles.goodsItem} key={index}>
                                        <Text style={styles.goodsItemTitle}>{item.goodsName}</Text>
                                        <View>
                                            <Text style={styles.goodsItemText}>¥{item.price} {unit}/{item.uomName}</Text>
                                            <Text style={styles.goodsItemText2}>{item.quantity} {item.uomName}</Text>
                                        </View>
                                    </View>
                                )
                            })
                        }
                    </Animated.View>
                    {
                        orderItemList && orderItemList.length > 1 ? <TouchableOpacity onPress={() => { this._startAnimated(orderItemList.length) }} activeOpacity={1} style={styles.imgBox}>
                            <Animated.Image style={[styles.downImg, { transform: [{ rotateX: spin }] }]} source={titleImgObj} ></Animated.Image>
                        </TouchableOpacity> : null
                    }
                    <View style={styles.itemFooter}>
                        <Text style={{ fontSize: 13 * scale, color: '#272727' }}>共：{totalOrderQuantity}吨 </Text>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Text style={{ fontSize: 13 * scale, color: '#272727' }}>合计：{unitSymbol}{totalOrderAmt || '--'}{unit}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View >
        )
    }
}

const styles = StyleSheet.create({
    listItem: {
        backgroundColor: '#fff',
        borderRadius: 4 * scale,
        marginBottom: 15 * scale,
        marginTop: 7 * scale,
        paddingLeft: 12 * scale,
        paddingRight: 12 * scale,
        paddingBottom: 12 * scale,
        paddingTop: 12 * scale,
    },
    itemHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingBottom: 10 * scale,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
    },
    itemCommonText: {
        fontSize: 13 * scale,
        color: '#272727',
        paddingBottom: 6 * scale,
        paddingTop: 4 * scale
    },
    itemHead: {
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    itemFooter: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
        marginTop: 10 * scale,
        paddingTop: 10 * scale,
        borderTopColor: '#e4e4e4',
        borderTopWidth: 1 / PixelRatio.get(),
        borderStyle: 'solid',
    },
    itemBody: {
        position: 'relative',
        overflow: 'hidden',
        backgroundColor: '#fff',
        height: 50 * scale
    },
    goodsItem: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 15 * scale,
        height: 40 * scale
    },
    goodsItemTitle: {
        fontSize: 14 * scale,
        fontWeight: 'bold'
    },
    goodsItemText: {
        fontSize: 13 * scale,
        color: '#333',
        textAlign: 'right',
        lineHeight: 20 * scale
    },
    goodsItemText2: {
        fontSize: 13 * scale,
        color: '#666',
        textAlign: 'right',
        lineHeight: 20 * scale
    },
    goodsTotal: {
        textAlign: 'center',
    },
    infoItemImg: {
        marginLeft: 5 * scale
    },
    imgBox: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    downImg: {
        width: 12 * scale,
        height: 12 * scale,
        padding: 10 * scale
    }

})